<template>
  <div>
    <a-card :bordered="false" :body-style="{marginBottom: '20px'}">
      <a-form :form="form">
        <h4 class="form-title"><b>基本信息</b></h4>
        <a-row :gutter="24" :style="{ marginBottom: '16px' }">
          <a-col :span="8">
            <label class="labeltitle">设备名称:</label> 
            <span class="item-content">{{ this.$route.query.node }}</span>
          </a-col>
          <a-col :span="8">
            <label class="labeltitle">设备地址:</label> 
            <span class="item-content">{{ this.$route.query.node_alias }}</span>
          </a-col>
          <a-col :span="8">
            <label class="labeltitle">运行状态:</label> 
            <span class="item-content">
              <a-badge status="success" text="正常" v-if="this.$route.query.status === '0'"/>
              <a-badge status="warning" text="故障" v-if="this.$route.query.status === '1'"/>
              <a-badge status="warning" text="未知" v-if="this.$route.query.status === '-1'"/>
            </span>
          </a-col>
        </a-row> 
        <a-row :gutter="24" :style="{ marginBottom: '16px' }">
          <a-col :span="8">
            <label class="labeltitle">设备厂商:</label> 
            <span class="item-content">{{ this.$route.query.dev_vendor }}</span>
          </a-col>
          <a-col :span="8">
            <label class="labeltitle">设备类型:</label> 
            <span class="item-content">{{ this.$route.query.dev_type }}</span>
          </a-col>
          <a-col :span="8">
            <label class="labeltitle">内部标识:</label> 
            <span class="item-content">{{ this.$route.query.dn }}</span>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <div
            :style="{ float: 'right', overflow: 'hidden', marginRight: '25px' }"
          >
            <a-button type="primary" class="btn-rt10" @click="refresh(true)">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset()">重置</a-button>
          </div>
          <a-col :lg="8" :md="12" :sm="24" style="float:right">
            <a-form-item label="时间周期">
              <a-range-picker
                :show-time="{ format: 'HH:mm:ss' }"
                :ranges="datePicker.ranges"
                format="YYYY-MM-DD HH:mm:ss"
                :placeholder="['选择开始时间', '选择结束时间']"
                :default-value="defaultCreateDateValue"
                v-model="defaultCreateDateValue"
                style="width: 100%"
                @change="onChangeDate"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-card
      :bordered="false"
      size="default" 
      title="关键性能指标">
      <div slot="extra">
      </div>
      <a-spin :spinning="loading">
        <a-row :gutter="24">
          <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
            <cpu-usage :startTime="startTime" :endTime="endTime"></cpu-usage>
          </a-col>
          <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
            <mem-usage :startTime="startTime" :endTime="endTime"></mem-usage>
          </a-col>
        </a-row>
      </a-spin>
    </a-card>
  </div>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import moment from 'moment'
import CpuUsage from './modules/netCpuUsage'
import MemUsage from './modules/netMemUsage'

export default {
  name: 'HostList',

  components: {
    STable,
    Ellipsis,
    CpuUsage,
    MemUsage
  },

  data () {
    return {
      // 页面基础参数
      loading: false,
      visible: false,
      confirmLoading: false,
      scrollx: 1600,

      // 页面菜单权限
      routerPermission: {},

      // 日期时间选择
      datePicker: {
        ranges: {
          '15分钟': [moment().subtract(15, 'minute'), moment()],
          '1个小时': [moment().subtract(1, 'hour'), moment()],
          当天: [moment().startOf('day'), moment()],
          '3天前': [moment().subtract(3, 'day'), moment()],
          本周: [moment().subtract(1, 'week'), moment()],
          本月: [moment().startOf('month'), moment()],
          最近3个月: [moment().subtract(3, 'month'), moment()],
          最近半年: [moment().subtract(6, 'month'), moment()]
        },
        date: [moment().subtract(1, 'day'), moment()],
        name: ''
      },
      startTime: '',
      endTime: '',
      defaultCreateDateValue: [moment(new Date()).add(-1, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]
    }
  },

  filters: {
  },

  computed: {
  },

  mounted () {
  },

  methods: {
    onChangeDate (value, dateString) {
      this.startTime = dateString[0]
      this.endTime = dateString[1]
      console.log('选择日期: ', value, dateString)
      console.log(this.startTime, this.endTime)
    },

    reset () {
      this.queryParam = {}
      // 默认日期时间
      this.defaultCreateDateValue = []
      // 查询开始时间
      this.startTime = ''
      // 查询结束时间
      this.endTime = ''
    }
  }
}
</script>

<style lang="less" scoped>
  .form-title {
    color: rgba(0,0,0,.85);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .labeltitle{
    margin-right: 10px;
  }
  .item-content{
    color: #999;
  }
</style>
